<script setup lang="ts">
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import type { FormInstance, FormRules } from 'element-plus';
import { storeToRefs } from 'pinia';
import useuserStore from '@/store/modules/user';

const router = useRouter();
// pinia
const useuser = useuserStore();
// 解构
const { list } = storeToRefs(useuser);

const formSize = ref('default');
const ruleFormRef = ref<FormInstance>();
// 默认值
const ruleForm = reactive({
  name: 'analysis123',
  password: '123456',
  delivery: false,
  type: [],
});
// 规则
const rules = reactive<FormRules>({
  name: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    {
      min: 3, max: 20, message: '用户名长度必须为三个字符以上', trigger: 'blur',
    },
  ],
  password: [
    { required: true, message: '密码有误请重新输入', trigger: 'blur' },
  ],
  isAgree: [
    { required: true, message: '请勾选', trigger: 'change' },
  ],
});

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate(async (valid: any, fields: any) => {
    if (valid) {
      // 登陆接口 传值
      await useuser.updatelogin({
        username: ruleForm.name,
        password: ruleForm.password,
      });
      // 取id推下一页
      router.push({
        name: 'My',
        params: {
          id: list.value.data.id,
        },
      });
      ElMessage.success('登陆成功');
    } else {
      // todo
      ElMessage.error('登陆失败 请检查用户名或密码或是否勾选必选项');
    }
  });
};
// 重置输入框
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

</script>

<template>
  <div>
    <img
      class="login"
      src="https://img.zcool.cn/community/01lvt42bdvcynh77j7iglv3233.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,q_100"
    >
  </div>
  <div class="loginbox">
    <div class="loginacount">账号登录</div>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      :size="formSize"
    >
      <el-form-item
        label="账号"
        prop="name"
      >
        <el-input
          class="inputstyle"
          placeholder="请输入账号"
          v-model="ruleForm.name"
        />
      </el-form-item>
      <el-form-item
        label="密码"
        prop="password"
      >
        <el-input
          type="password"
          show-password
          class="inputstyle"
          placeholder="请输入密码"
          v-model="ruleForm.password"
        />
      </el-form-item>
      <el-form-item
        prop="isAgree"
      >
        <el-checkbox-group v-model="ruleForm.isAgree">
          <el-checkbox name="type">
            我已同意
            <a
              href=""
              class="astyle"
            >《隐私条款》</a>
            和
            <a
              href=""
              class="astyle"
            >《服务条款》</a>
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="submitForm(ruleFormRef)"
        >
          登录
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">清空</el-button>
      </el-form-item>
      <div class="test">
        测试账号: analysis123
        <span>密码: 123456</span>
      </div>
    </el-form>
  </div>
</template>

<style lang="scss" scoped>
  .login {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    position: relative
  }
  .loginbox {
    width: 500px;
    padding-top: 20px;
    background: rgba(255, 255, 255, 0.1);
    position: absolute;
    top: 30%;
    left: 33%;
    border-radius: 8px;
  }
  .inputstyle {
    width: 300px;
  }
  :deep(.el-input__wrapper) {
    background-color: rgba(255, 255, 255, 0.1);
  }
  :deep(.el-input__inner) {
    color: #fff;
  }
  :deep(element.style) {
    width: 3px;
  }
  .loginacount {
    text-align: center;
    margin-bottom: 10px;
    color: white;
  }
  .astyle {
    text-decoration:none;
    color: #409EFF;
  }
  .test {
    margin-bottom: 10px;
    text-align: center;
    color: #606266;
    font-size: 14px;
  }

</style>
